<template>
  <div class="app-container">
    <com_header />
    <main>
      <!-- 游戏列表 -->
      <ul
        v-loading="loading"
        element-loading-text="loading..."
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <li v-for="(item, index) in product_list" :key="index">
          <img v-lazy="item.images[0]" alt="" @click="toGameItem(item)" />
          <div class="game-info">
            <p class="name ellipsis">{{ item.name }}</p>
            <p @click="toGameItem(item)" class="text">Go play</p>
          </div>
        </li>
      </ul>
    </main>
  </div>
</template>

<script setup>
import com_header from "@/components/com_header/index.vue";
import { productList } from "@/api/product";
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";

const route = useRoute();
const router = useRouter();
const store = useStore();

const loading = ref(false);

// 获取游戏分类列表
const total = ref(0);
const product_list = ref([]);
const params = ref({
  category_id: [route.query.id],
  page: 1,
  per_page: 100,
});
const getProductList = () => {
  loading.value = true;
  productList({ ...params.value }).then((res) => {
    total.value = res.data.total;
    product_list.value = res.data.data;
    loading.value = false;
    // console.log(product_list.value);
  });
};

// 跳转游戏
const toGameItem = (item) => {
  router.push({
    path: "/gameItem",
    query: { id: item.id },
  });
};

// 分页功能
const handleChange = (page, size) => {
  params.value.page = page;
  params.value.per_page = size;

  getProductList();
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};

watch(
  () => route.query.id,
  (n) => {
    if (n) {
      params.value.category_id = [route.query.id];
      getProductList();
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
.app-container {
  padding-top: 80px;
  min-height: 100vh;
  background: #111;
  main {
    padding: 20px;
    margin: 0 auto;
    width: 1400px;
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    ul {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      li {
        padding: 20px;
        height: fit-content;
        display: flex;
        justify-content: space-between;
        background: #4a4a4ca6;
        img {
          width: 140px;
          height: 80px;
          cursor: pointer;
        }
        .game-info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .name {
            font-size: 14px;
            text-align: right;
            color: #fff;
          }
          .text {
            font-size: 14px;
            text-align: right;
            color: #b4b7b7;
            cursor: pointer;
            &:hover {
              color: #15a251;
            }
          }
        }
      }
    }
    ::v-deep .el-pagination {
      margin-top: 40px;
      display: flex;
      justify-content: end;
      .btn-prev {
        color: #b4b7b7;
        background: #4a4a4ca6;
        &:hover {
          color: #fff;
        }
      }
      .btn-next {
        color: #b4b7b7;
        background: #4a4a4ca6;
        &:hover {
          color: #fff;
        }
      }
      .el-pager {
        .is-active {
          background: #15a251;
          color: #fff;
        }
      }
      .number {
        color: #b4b7b7;
        background: #4a4a4ca6;
      }
    }
  }
}
</style>